<template>
	<view class="content">
		<view class="header">
			<view class="mohu" v-show="ViewKou>=30">
				
			</view>
			<view class="zhanwei">
			</view>
			<view class="biao_ti">
				<text class="top-text">插图分类</text>
				<navigator url="/pages/index/sousuo/SOU" class="sousuo" :style="ViewKou>=30?'background-color: rgba(227, 227, 227, 0.3);':'background-color: #1a1a1a;'">
					<image src="../../static/image/sousuo1.png" mode="scaleToFill"></image>
					搜索插图/漫画
				</navigator>
			</view>
		</view>
		<!-- 占位 -->
		<view style="height:190rpx;"></view>
		<!-- 排行榜 -->
		<view class="paihang">
			<view class="noe" v-for="(item,index) in sanBang" :key="index" @click="TiaoBang(item)">
				<text>{{item.title}}</text>
				<text>{{item.yinwei}}</text>
			</view>
		</view>
		<!-- 三排 -->
		<view class="Re_men" v-for="(itee,index) in qLeiList" :key="index">
			<view class="title-top">
				<text class="T-h1">{{itee[0].title}}</text>
				<view class="T-h2">更多<image src="../../static/image/youjiantou (3).png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="song_sheet">
				<view class="Subframe" v-for="(item,indexs) in qLeiList[index]" :key="indexs" @click="TiaoBang(item)">
					<view class="cover_img">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import W_request from '@/utis/api.js'
	export default {
		data() {
			return {
				ViewKou:0,//存储窗口滚动的值
				sanBang:[{title:"排行榜",yinwei:"Ranking",sortid:10101},{title:"下载榜",yinwei:"DownLoad",sortid:20202},{title:"收藏榜",yinwei:"Collection",sortid:30303}],
				qLeiList:[]
			}
		},
		//监听滚动
		onPageScroll(e) {
			this.ViewKou = e.scrollTop;
		},
		onLoad(){
			this.aoxis()
		},
		methods: {
			//请求
			aoxis(){
				W_request({
					url:"api/index/three",
				}).then(res=>{
					this.qLeiList = res.data;
					console.log(this.qLeiList)
				},err=>{
					console.log(err)
				});
			},
			//跳榜
			TiaoBang(item){
				uni.navigateTo({
					url:`../index/bangdan/Bang?id=${item.sortid}&title=${item.title}`
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	@font-face {
	  font-family: 'YouSheBiaoTiHei';
	  src: url('https://kuaiyinvideo.oss-cn-beijing.aliyuncs.com/ziti.ttf');
	}
	//共享标题
	.title-top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
	
		.T-h1 {
			font-size: 36rpx;
			color: #dfdfdf;
			font-family: "YouSheBiaoTiHei";
			display: flex;
			align-items: center;
			image{
				width: 30rpx;
				width: 30rpx;
			}
		}
	
		.T-h2 {
			font-size: 26rpx;
			color:rgb(222, 204, 1);
			display: flex;
			align-items: center;
			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.mohu{
		width: 100%;
		height: 100%;
		backdrop-filter: blur(5px);
		background-color: rgba(255, 255, 255, 0.1); /* 透明度为50%的白色背景 */
		position: absolute;
		z-index: 1;
	}
	.content {
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.header{
			width: 100%;
			height:150rpx;
			// background-color: rgb(19, 20, 22);
			display: flex;
			flex-direction: column;
			align-items: center;
			position: fixed;
			top: 0;
			z-index: 100;
			padding-bottom: 20rpx;
			.zhanwei{
				width: 100%;
				height: 100rpx;
			}
			.biao_ti{
				width: 93%;
				display: flex;
				align-items: center;
				position: relative;
				z-index: 50;
				.top-text{
					font-size: 40rpx;
					color:rgb(250,233,5);
					font-family: "YouSheBiaoTiHei";
				}
				.sousuo{
					width: 300rpx;
					height: 70rpx;
					background-color: #1a1a1a;
					border-radius: 100rpx;
					display: flex;
					align-items: center;
					position: relative;
					font-size: 26rpx;
					color: #e2e2e2;
					margin-left: 30rpx;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-left: 20rpx;
						margin-right: 15rpx;
					}
				}
			}
			
		}
		
		//排行榜
		.paihang{
			width: 93%;
			overflow: hidden;
			// background-color: #dfdfdf;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0;
			.noe{
				width: 215rpx;
				height: 100rpx;
				background-image: linear-gradient(to bottom,rgb(255, 93, 65),rgb(251, 200, 81));
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				text:nth-child(1){
					font-size: 40rpx;
					font-family: "YouSheBiaoTiHei";
					color: #1a1a1a;
				}
				text:nth-child(2){
					font-size: 30rpx;
					font-family: "YouSheBiaoTiHei";
					color: #1a1a1a;
				}
			}
		}
		
		//正常
		.Re_men {
			width: 93%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			.song_sheet {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				overflow: hidden;
				justify-content: space-between;
				margin-top: 10rpx;
				.Subframe {
					width: 31%;
					height: 220rpx;
					// background-color: #00ffff;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 20rpx;
					.cover_img {
						width: 100%;
						height: 220rpx;
						overflow: hidden;
						border-radius: 15rpx;
						image{
							width: 100%;
							height: 100%;
							background-color: #fff;
						}
					}
		
					.Copywriting {
						width: 100%;
						height: 70rpx;
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #3b3b3b;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/* 超出几行省略 */
					}
				}
			}
		}
	}
</style>
